<template>
  <div>
    <div id="tjsp" v-loading="loading">
      <span>条码</span>&nbsp;
      <el-input v-model="addData.barcode" placeholder="请输入内容"></el-input>
      <span>一级商品类别</span>&nbsp;
      <el-select v-model="addData.class_First" placeholder="请选择">
        <el-option value=""></el-option>
        <el-option label="粮油" value="粮油"></el-option>
        <el-option label="食品" value="食品"></el-option>
        <el-option label="零食" value="零食"></el-option>
        <el-option label="电器" value="电器"></el-option>
      </el-select>
      <span>二级商品类别</span>&nbsp;
      <el-select v-model="addData.class_Second" placeholder="请选择">
        <el-option value=""></el-option>
        <el-option label="水果" value="水果"></el-option>
        <el-option label="电脑" value="电脑"></el-option>         
        <el-option label="零食" value="零食"></el-option>
        <el-option label="食用油" value="食用油"></el-option> </el-select
      ><br /><br />
      <span>商品名称</span>&nbsp;
      <el-input
        v-model="addData.goods_Name"
        placeholder="请输入内容"
      ></el-input>
      <span>单位</span>&nbsp;
      <el-input v-model="addData.unit" placeholder="请输入内容"></el-input>
      <span>当前售价</span>&nbsp;
      <el-input
        v-model="addData.persent_Price"
        placeholder="请输入内容"
      ></el-input
      ><br /><br /><br />
      <el-button
        type="primary"
        style="margin-left: 330px; width: 200px"
        @click="add"
        >添加</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  name: "Tianjiashangpin",
  data() {
    return {
      loading:false,
      addData: {
        barcode: "",
        class_First: "",
        class_Second: "",
        goods_Name: "",
        unit: "",
        persent_Price: "",
      },
    };
  },
  methods: {
    getPro(){
      this.$axios({
          url: "/findpro",
          method: "get",
        }).then((res) => {
          console.log(res);
          this.data = res.data.data;
          this.total = res.data.data.length;
          this.loading=false;
        });
    },
    add() {
      this.loading=true;
      this.$axios({
        url: "/addpro",
        method: "post",
        data: this.addData,
      }).then((res) => {
        console.log(res);
        this.getPro();
        if(res.data.code == 200){
          this.$message({
          message: '添加成功',
          type: 'success'
        });
        }
      });
    },
  },
};
</script>
<style scoped>
#tjsp {
  padding: 30px;
}
#tjsp .el-button {
  background: blueviolet;
  color: white;
}
.el-input {
  width: 210px;
  margin-right: 20px;
}
</style>